<template>
  <div class="table-wrapper">
    <el-table :data="filtertabledata" style="width: 100%">
      <el-table-column label="编号" prop="Id" />
      <el-table-column label="姓名" prop="username" />
      <el-table-column label="性别" prop="gender" :formatter="genderFormatter">
      </el-table-column>
      <el-table-column label="手机号" prop="phone" />
      <el-table-column label="省份" prop="province" />
      <!-- <el-table-column label="城市" prop="city" /> -->
      <el-table-column label="备注" prop="remark" />
      <el-table-column align="right">
        <template #header>
          <el-input v-model="search" placeholder="Type to search">
            <template #prepend>
              <el-tooltip class="box-item" effect="dark" content="添加朋友" placement="left-end">
                <el-button type="primary" :icon="CirclePlus" circle @click="addFriend" />
              </el-tooltip>
            </template>
          </el-input>
        </template>
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
          <el-popconfirm title="友谊诚可贵，且行且珍惜" confirm-button-text="删掉" cancel-button-text="我只是手滑了"
            @confirm="handleDelete(scope.$index, scope.row)">

            <template #reference>
              <el-button size="small" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!-- 弹出对话框 -->
  <el-dialog v-model="dialogVisible" :title="dialogTitle" @open="() => {
    // 当对话框展开时 从缓存刷新到响应式对象上
    currentFriend.Id = friendStore.friend.Id
    currentFriend.username = friendStore.friend.username
    currentFriend.gender = friendStore.friend.gender
    currentFriend.province = friendStore.friend.province
    currentFriend.remark = friendStore.friend.remark
    currentFriend.uid = friendStore.friend.uid
    currentFriend.phone = friendStore.friend.phone
  }" @close="()=>{
    // 处理善后
    friendStore.setFriend({} as IFriend);
  }">
    <el-form ref="elForm" :model="currentFriend" size="small" label-width="100px" label-position="left">
      <el-form-item label="姓名" prop="username">
        <el-input v-model="currentFriend.username" placeholder="请输入姓名" :maxlength="11" show-word-limit clearable
          prefix-icon="el-icon-mobile" :style="{ width: '100%' }"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-select @change="genderChanged" v-model="currentFriend.gender" placeholder="请选择性别" clearable
          :style="{ width: '100%' }">
          <!-- <el-option v-for="(item, index) in formGenderOptions" :key="index" :label="item.label"
          :value="item.value" :disabled="item.disabled"></el-option> -->
          <el-option value="1" label="男">男</el-option>
          <el-option value="0" label="女">女</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="currentFriend.phone" placeholder="请输入手机号" :maxlength="11" show-word-limit clearable
          prefix-icon="el-icon-mobile" :style="{ width: '100%' }"></el-input>
      </el-form-item>
      <el-form-item label="省份" prop="province">
        <el-select v-model="currentFriend.province" placeholder="请选择所在省" clearable :style="{ width: '100%' }">
          <el-option value="上海市" label="上海市">上海市</el-option>
          <el-option value="云南省" label="云南省">云南省</el-option>
          <el-option value="内蒙古自治区" label="内蒙古自治区">内蒙古自治区</el-option>
          <el-option value="北京市" label="北京市">北京市</el-option>
          <el-option value="台湾省" label="台湾省">台湾省</el-option>
          <el-option value="吉林省" label="吉林省">吉林省</el-option>
          <el-option value="四川省" label="四川省">四川省</el-option>
          <el-option value="天津市" label="天津市">天津市</el-option>
          <el-option value="宁夏回族自治区" label="宁夏回族自治区">宁夏回族自治区</el-option>
          <el-option value="安徽省" label="安徽省">安徽省</el-option>
          <el-option value="山东省" label="山东省">山东省</el-option>
          <el-option value="山西省" label="山西省">山西省</el-option>
          <el-option value="广东省" label="广东省">广东省</el-option>
          <el-option value="广西壮族自治区" label="广西壮族自治区">广西壮族自治区</el-option>
          <el-option value="新疆维吾尔自治区" label="新疆维吾尔自治区">新疆维吾尔自治区</el-option>
          <el-option value="江苏省" label="江苏省">江苏省</el-option>
          <el-option value="江西省" label="江西省">江西省</el-option>
          <el-option value="河北省" label="河北省">河北省</el-option>
          <el-option value="河南省" label="河南省">河南省</el-option>
          <el-option value="浙江省" label="浙江省">浙江省</el-option>
          <el-option value="海南省" label="海南省">海南省</el-option>
          <el-option value="湖北省" label="湖北省">湖北省</el-option>
          <el-option value="湖南省" label="湖南省">湖南省</el-option>
          <el-option value="澳门" label="澳门">澳门</el-option>
          <el-option value="甘肃省" label="甘肃省">甘肃省</el-option>
          <el-option value="福建省" label="福建省">福建省</el-option>
          <el-option value="西藏自治区" label="西藏自治区">西藏自治区</el-option>
          <el-option value="贵州省" label="贵州省">贵州省</el-option>
          <el-option value="辽宁省" label="辽宁省">辽宁省</el-option>
          <el-option value="重庆市" label="重庆市">重庆市</el-option>
          <el-option value="陕西省" label="陕西省">陕西省</el-option>
          <el-option value="青海省" label="青海省">青海省</el-option>
          <el-option value="香港" label="香港">香港</el-option>
          <el-option value="黑龙江省" label="黑龙江省">黑龙江省</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="currentFriend.remark" placeholder="请输入备注" :maxlength="11" show-word-limit clearable
          prefix-icon="el-icon-mobile" :style="{ width: '100%' }"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="() => {
        dialogVisible = false
      }">取消</el-button>


      <template v-if="dialogTitle == '修改朋友'">
        <el-button type="primary" @click="saveUpdateChanged">修改</el-button>
      </template>
      <template v-else>
        <el-button type="primary" @click="saveUpdateChanged1">添加</el-button>
      </template>


      <!-- 
      <el-button type="primary" @click="()=>{
        if(dialogTitle=='添加朋友'){
          // do something
        }else if(dialogTitle=='修改朋友'){

        }
        }">确定</el-button> -->


      <!-- <el-button type="primary" @click="saveUpdateChanged">确定</el-button> -->
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
// import { ElNotification } from "element-plus";
import { computed, onMounted, reactive, ref, toRefs } from "vue";
import api from "../../helper/api";
import { CirclePlus } from "@element-plus/icons-vue";
import { useUserStore } from "../../store/user";
import  { useFriendStore } from "../../store/friend";
import type {IFriend} from '../../store/friend';

const dialogVisible = ref(false);

// 当前登录管理员信息
const userStore = useUserStore();
// 待操作的朋友 (alter,add)
const friendStore = useFriendStore();

const formData = reactive({
  uid: "",
  username: "",
  gender: "",
  phone: "",
  province: "",
  remark: "",
});

/**
    id: "",
    uid: "",
    username: "",
    gender: "",
    province: "",
    phone: "",
    remark: "",
 */
const currentFriend = reactive({} as IFriend);



// 当前状态标识 可以通过 标题判断

const dialogTitle = ref("");

// =========================

// 性别改变事件
const genderChanged = (val) => {
  currentFriend.gender = val;
};

const search = ref("");
const filtertabledata = computed(() =>{
  if(!tableData.value){
    return
  }
  return tableData.value.filter(
    (data) =>
      !search.value ||
      data.username.toLowerCase().includes(search.value.toLowerCase())
  )
});



// 修改
const handleEdit = (index: number, friend) => {
  friendStore.setFriend(friend);
  dialogTitle.value = "修改朋友";
  dialogVisible.value = true;
};
// 添加朋友
const addFriend = (index: number, friend) => {
  // 添加朋友前清空 friend
  console.log("添加朋友")
  friendStore.setFriend({} as IFriend);
  dialogTitle.value = "添加朋友";
  dialogVisible.value = true;
}


// 删除朋友信息
const handleDelete = (index: number, friend) => {
  // console.log(index, friend);
  api.deleteFriendById(friend.Id)
    .then(_ => {
      refreshFriendList();
    })
};

let tableData = ref([] as Array<IFriend>)

const genderFormatter = (row, column, cellValue, index) => {
  return cellValue === "1" ? "男" : "女";
};


const refreshFriendList = () => {
  api
    .getFriendList(`${userStore.id}`)
    .then((res) => {
      tableData.value = res.data.data.resp;
    })
    .catch((err) => {
      // console.log(err);
    });
  dialogVisible.value = false;
}



// 提交保存事件

const saveUpdateChanged = () => {
  // console.log("修改了");
  let temp = currentFriend;
  api.updateFriendById(temp.Id, temp.username, temp.gender, temp.phone, temp.province, temp.remark)
    .then(_ => {
      refreshFriendList();
    })
};

// 添加用户
const saveUpdateChanged1 = () => {
  currentFriend.uid = userStore.id;
  api.inserFriend(currentFriend.gender, currentFriend.Id, currentFriend.phone, currentFriend.province, currentFriend.remark, currentFriend.uid, currentFriend.username)
  .then(_=>{
    refreshFriendList();
  })
};

// 页面加载完毕事件
onMounted(() => {
  refreshFriendList();
});

</script>
